<template>
  <div>
    <table>
      <tr is="Mytr"
       v-for="(item,index) in goodsArr" :key="index"
      :obj=item
      :index=index
      ></tr>
      <p>All Number:{{total}}</p>
    </table>
  </div>
</template>

<script>
import Mytr from "./components/Mytr.vue"
export default {
  data(){
    return{
      goodsArr: [
    {
        count: 0,
        goodsName: "Watermelon"
    }, {
        count: 0,
        goodsName: "Banana"
    }, {
        count: 0,
        goodsName: "Orange"
    }, {
        count: 0,
        goodsName: "Pineapple"
    }, {
        count: 0,
        goodsName: "Strawberry"
    }
]
    }
  },
  components:{
    Mytr
  },
  computed:{
    total(){
     return  this.goodsArr.reduce((sum,obj)=>{return sum+obj.count},0)
    }
  }
}
</script>

<style>

</style>